import { makeBooleanProp } from 'wot-design-uni/components/common/props';
import { pickerProps as baseProps } from 'wot-design-uni/components/wd-picker/types';

import { propTypes } from '@/utils/propTypes';

export {
  type PickerBeforeConfirm,
  type PickerDisplayFormat,
  type PickerExpose,
  type PickerInstance,
  type PickerProps,
} from 'wot-design-uni/components/wd-picker/types';

export const pickerProps = {
  ...baseProps,
  /** 自定义层级 */
  zIndex: propTypes.number(400),
  /** Popup 自定义根节点样式 */
  popupStyle: propTypes.string(''),
  /** 显示分割线 */
  divider: propTypes.bool(true),
  /**
   * 禁止滚动穿透
   * 。使用组件时，会发现内容部分滚动到底时，继续划动会导致底层页面的滚动，这就是滚动穿透。
   * 目前，组件可以通过 lock-scroll 属性处理部分滚动穿透问题。 但由于小程序和APP平台自身原因，弹窗内容区域仍会出现滚动穿透。 不过，我们为开发者提供了一个推荐方案以完整解决滚动穿透：
   * 可以使用 page-meta 组件动态修改 page-meta 的 overflow 属性。
   * @example ```vue
   * <!-- page-meta 只能是页面内的第一个节点，组件中不能使用。可通过组件的 :popup-show="boolean" 属性引出后在页面组件中设置。 -->
   * <page-meta :page-style="`overflow:${show ? 'hidden' : 'visible'};`" />
   * <wd-popup v-model="show" lock-scroll :safe-area-inset-bottom="true" />
   * ```
   */
  lockScroll: makeBooleanProp(true),
};
